<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="statics/jquery-3.4.1.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body {
            background-color: rgb(233, 236, 245);
        }
        #main {
            border: gray solid 1px;
            height: 570px;
            width: 450px;
            margin-left: 550px;
            margin-top: 50px;
            background-color: white;
        }
        #p1 {
            font-size: 25px;
            color: #5FB878;
        }
        #p2 {
            font-size: 13px;
            font-family: 微软雅黑;
        }
        #font {
            /*border: red solid 1px;*/
            width: 150px;
            margin-top: 30px;
            margin-left: 25px;
        }
        #form{
            /*border: red solid 1px;*/
            height: 460px;
            margin-top: 20px;
        }
        .layui-input-block{
            /*border: red solid 1px;*/
            width: 400px;
            margin-left: 25px;
        }
        .layui-input{
            margin-top: 20px;
        }
        .layui-btn{
            /*border: red solid 1px;*/
            width: 400px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="font">
        <p id="p1">注册用户</p>
        <p id="p2">创建一个新的用户</p>
    </div>
    <div id="form">
        <form class="layui-form" action="regService" method="post">
            <div class="layui-input-block">
                <input type="text" name="username" id="username" onblur="checkUser();" olay-reqText="请输入账号" autocomplete="off" lay-verify="username|required" placeholder="请输入账号"  class="layui-input">
                <input type="password" name="password" lay-reqText="请输入密码" autocomplete="off" lay-verify="password|required" placeholder="请输入密码"  class="layui-input">
                <input type="text" name="name" lay-reqText="请输入姓名" autocomplete="off" lay-verify="required" placeholder="请输入姓名"  class="layui-input">
                <input type="text" name="email" lay-reqText="请输入邮箱" autocomplete="off" lay-verify="email|required" placeholder="请输入邮箱"  class="layui-input">
                <input type="text" name="phone" lay-reqText="请输入手机号" autocomplete="off" lay-verify="phone|required" placeholder="请输入手机号"  class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                    <br>
                    <button type="reset" class="layui-btn layui-btn-warm" onclick="GoBack();">返回登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

<script type="text/javascript">
    function GoBack() {
        window.location.href="./Login.html";
        //window.open("./Login.html","name");
    }
    //验证账号是否重复 错误排查半天 发现是js包导入位置的问题
    function checkUser() {
        $.ajax({
            url:"isExistUser",
            data:{"username":$("#username").val()},//$("#user").val()
            type:"post",
            success:function (data) {
                if(data=="true"){
                    alert("此用户已存在，请再想一个名字吧。(*^▽^*)");
                }
            }
        });
    }
</script>

<script src="layui/layui.js"></script>
<script>
    layui.use([ "form", "layer", "laydate" ], function () {
        laydate = layui.laydate;
        form = layui.form;
        layer = layui.layer;// 表单验证
        form.render();
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            ,username:[
                /^[\S]{8,12}$/
                ,'用户名必须8到12位，且不能出现空格'
            ]

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    });

    form.on('submit(*)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
</script>
</html>